@import 'reset.css';
@import 'fonts.css';

*{
	box-sizing: border-box;
}

body{
	background: url(../images/bgr.png) repeat;
	font-family: 'latoregular';
	font-size: 16px;
	text-transform: uppercase;
}
h1,h2,h3,p,a{
	color: white;
}
h3{
	color: white;
	font-family: 'latolight';
	font-size: 18px;
	margin: 0 0 20px;
}
p{
	color: #999;
	font-family: 'latoregular';
	font-size: 14px;
	margin: 0 0 20px;
}

.clear{
	clear: both;
}

.ipad{
	background: url(../images/ipad.png) no-repeat center top;
	background-size: 1250px;
	box-shadow: 0px 0px 20px rgba(0,0,0,.8);
	-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8);

	border-radius: 41px;
	-moz-border-radius: 41px;
	-webkit-border-radius: 41px;

	display: block;
	height: 881px;
	margin: 20px auto 0;
	overflow: hidden;
	width: 1253px;
}

.container-app{
	background: url(../images/bgr-app.png) no-repeat 0 0 #000;
	display: block;
	height: 768px;
	margin: 57px auto 0;
	position: relative;
	overflow: hidden;
	width: 1024px;
}

.intro{
	background: url(../images/bgr-app-intro.jpg) no-repeat 0 0 #000;
	display: block;
	height: 768px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	width: 100%;
}
.intro figure{
	display: block;
	margin: 180px auto 0;
	width: 308px;
}
.intro p{
	color: white;
	font-family: 'latolight';
	font-size: 40px;
	margin: 20px 0;
	text-transform: none;
}
.intro nav{
	margin: 0 auto;
	width: 200px;
}
.intro nav a{
	color: #3eecfa;
	font-family: "latolight";
	font-size: 24px;
	margin: 0 auto;
	width: 100%;
}
.intro nav a:hover{
	color: #fff;
}

header{
	background: rgba(0,0,0,0.5);
	border-bottom: 1px solid #3eecfa;
	border-top: 1px solid #3eecfa;
	height: 50px;
	position: relative;
	top: 0;
}
header h1{
	color: white;
	font-family: 'latobold';
	font-size: 16px;
	padding: 16px 0;
	text-align: center;
	text-transform: uppercase;
}
header a{
	background: url(../images/arrow.png) no-repeat 0 0;
	color: white;
	font-family: 'latolight';
	font-size: 16px;
	padding: 3px 0 3px 20px;
	position: absolute;
	left: 10px;
	top: 12px;
	text-transform: uppercase;
}
header a:hover{
	opacity: .8;
}

.nav-ppal{
	background: url(../images/bgr-nav.png) repeat 0 0;
	bottom: 0;

	box-shadow: 0px -20px 20px -10px rgba(0,0,0,.8);
	-moz-box-shadow: 0px -20px 20px -10px rgba(0,0,0,.8);
	-webkit-box-shadow: 0px -20px 20px -10px rgba(0,0,0,.8);

	display: block;
	height: 100px;
	padding: 23px 25px;
	position: absolute;
	width: 100%;
}
.nav-ppal ul li{
	float: left;
	margin: 0 10px;
}
.nav-ppal ul li a{
	background: url(../images/btn-nav.png) no-repeat 0 0;
	color: white;
	display: block;
	font-family: 'latoregular';
	font-size: 18px;
	height: 55px;
	padding: 20px 0px 0px 45px;
	text-transform: uppercase;
	width: 161px;
}
.nav-ppal ul li a:hover{
	background-position: 0 -65px;
	color: #3eecfa;
}
.nav-ppal ul li.band-info a{
	background: url(../images/btn-user.png) no-repeat 0 0;
	text-indent: -9999px;
	padding: 0;
	width: 55px;
}
.nav-ppal ul li.band-info a:hover{
	background-position: 0 -65px;
}
.nav-ppal ul li.input-list-btn a{
	background: url(../images/btn-input.png) no-repeat 0 0;
	padding: 0;
	text-indent: -9999px;
	width: 55px;
}
.nav-ppal ul li.input-list-btn a:hover{
	background-position: 0 -65px;
}
.nav-ppal ul li.credit{
	height: 80px;
	margin: -12px 10px 0;
	width: 80px;
}
.nav-ppal ul li.credit a{
	background: url(../images/btn-credit.png) no-repeat 0 0;
	height: 80px;
	padding: 0;
	text-indent: -9999px;
	width: 80px;
}
.nav-ppal ul li.credit a:hover{
	background-position: 0 -90px;
}

.nav-ppal .size-content{
	bottom: 70px;
	left: 110px;
	position: absolute;
	width: 163px;
	z-index: 100;
}
.nav-ppal .size-content li{
	border: 1px solid #3eecfa;
	margin: 0 0 10px;
	text-align: center;
}
.nav-ppal .size-content li a{
	background: black;
	height: auto;
	padding: 10px 20px;
}
.nav-ppal .size-content li a:hover, .nav-ppal .size-content li a.selected{
	background: #3eecfa;
	color: black;
}
.nav-ppal .size-content li a span{
	font-size: 12px;
}

.nav-ppal .shape-content{
	bottom: 70px;
	left: 290px;
	position: absolute;
	width: 163px;
	z-index: 100;
}
.nav-ppal .shape-content li{
	border: 1px solid #3eecfa;
	margin: 0 0 10px;
	text-align: center;
}
.nav-ppal .shape-content li a{
	background: black;
	height: auto;
	padding: 10px 20px;
}
.nav-ppal .shape-content li a:hover, .nav-ppal .shape-content li a.selected{
	background: #3eecfa;
	color: black;
}
.nav-ppal .shape-content li a span{
	font-size: 12px;
}

.stage{
	border: 1px dashed white;
	height: 575px;
	margin: 20px;
}

.stage.hori{
	width: 988px;
}
.stage.vert{
	width: 500px;
}
.stage.cuadrado{
	width: 575px;
}

.stage a{
	border: 1px solid white;
	color: #3eecfa;
	display: block;
	font-size: 20px;
	text-align: center;
	text-transform: uppercase;
}
.stage a:hover{
	background: url(../images/bgr-backline.png) repeat 0 0;
	color: #000;
}

.stage a.backline{
	height: 185px;
	margin-left: -200px;
	padding: 80px 0;
	position: absolute;
	left: 50%;
	top: 100px;
	width: 400px;
}
.stage a.monitor{
	height: 50px;
	margin-left: -200px;
	padding: 15px 0;
	position: absolute;
	left: 50%;
	top: 284px;
	width: 400px;
}
.stage a.foh{
	height: 60px;
	margin-left: -50px;
	padding: 20px 0;
	position: absolute;
	left: 50%;
	top: 556px;
	width: 100px;
}
.stage a.pa1{
	height: 60px;
	padding: 20px 0;
	position: absolute;
	left: 20%;
	top: 300px;
	width: 60px;
}
.stage a.pa2{
	height: 60px;
	padding: 20px 0;
	position: absolute;
	right: 20%;
	top: 300px;
	width: 60px;
}

.stage a.input-list{
	height: 40px;
	font-size: 16px;
	margin-left: -110px;
	padding: 10px 0;
	position: absolute;
	left: 50%;
	top: 425px;
	width: 223px;

	transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}



.container-backline{
	background: url(../images/stairs.png) no-repeat center 60px;
	border: 1px solid white;
	height: 580px;
	margin: 20px auto;
	overflow: hidden;
	width: 1000px;
}
.container-backline .backline{
	background: url(../images/bgr-backline.png) repeat 0 0;
	height: 420px;
	margin: 30px auto 0;
	width: 700px;
}
.container-backline .backline span{
	border: 1px dotted #adcccf;
	color: #ccc;
	height: 140px;
	float: left;
	padding: 60px;
	position: relative;
	width: 140px;
}
.container-backline .backline span a{
	display: block;
	height: 50px;
	position: absolute;
	text-indent: -9999px;
}
.container-backline .backline span a:hover{
	opacity: .7;
}

.container-backline .backline span a.spot-bat{
	background: url(../images/bat1.png) no-repeat center;
	left: 30px;
	top: 40px;
	width: 87px;
}
.container-backline .backline span a.spot-voz{
	background: url(../images/voz1.png) no-repeat center;
	background-size: contain;
	left: 35px;
	top: 45px;
	width: 72px;

	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.container-backline .backline span a.spot-cor{
	background: url(../images/cor1.png) no-repeat center;
	height: 101px;
	left: 10px;
	top: 20px;
	width: 50px;
}
.container-backline .backline span a.spot-ele{
	background: url(../images/ele1.png) no-repeat center;
	left: 50px;
	top: 50px;
	width: 87px;

	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.container-backline .backline span a.spot-baj{
	background: url(../images/baj1.png) no-repeat center;
	left: 35px;
	top: 45px;
	width: 107px;

	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.container-backline .backline span a.spot-key{
	background: url(../images/key1.png) no-repeat center;
	left: 50px;
	top: 45px;
	width: 64px;
}
.container-backline .backline span a.spot-acu{
	background: url(../images/acu1.png) no-repeat center;
	left: 50px;
	top: 45px;
	width: 84px;

	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.container-backline .backline span a.spot-pia{
	background: url(../images/pia1.png) no-repeat center;
	left: 50px;
	top: 45px;
	width: 84px;
}




.nav-backline{
	margin: 40px auto 0;
	width: 987px;
}
.nav-backline li{
	color: white;
	float: left;
	font-family: 'latolight';
	font-size: 16px;
	margin: 0 2px;
	list-style: none;
	text-align: center;
	width: 137px;
}
.nav-backline a{
	display: block;
	height: 60px;
	margin: 5px 0;
}
.nav-backline a:hover{
	opacity: .8;
}

.nav-backline li.voz a{
	background: url(../images/voz1.png) no-repeat center #b8fffd;
	background-size: contain;
}
.nav-backline li.ele a{
	background: url(../images/ele1.png) no-repeat center #8efffe;
}
.nav-backline li.acu a{
	background: url(../images/acu1.png) no-repeat center #6bf9fe;
}
.nav-backline li.bat a{
	background: url(../images/bat1.png) no-repeat center #53effd;
}
.nav-backline li.baj a{
	background: url(../images/baj1.png) no-repeat center #2be8fa;
}
.nav-backline li.pia a{
	background: url(../images/pia1.png) no-repeat center #24c5d7;
}
.nav-backline li.key a{
	background: url(../images/key1.png) no-repeat center #1dacba;
}




/*bateria*/
.drums .sets li{
	border: 1px solid #3eecfa;
	display: block;
	height: 114px;
	float: left;
	width: 157px;
}
.drums .sets a{
	color: white;
	display: block;
	padding: 70px 0 10px;
	text-align: center;
}
.drums .sets li:nth-child(1) a{
	background: url(../images/sets-bateria1.png) no-repeat center 10px;
}
.drums .sets li:nth-child(2) a{
	background: url(../images/sets-bateria2.png) no-repeat center 10px;
}
.drums .sets li:nth-child(3) a{
	background: url(../images/sets-bateria3.png) no-repeat center 10px;
}
.drums .sets a span{
	font-family: 'latolight';
	font-size: 14px;
}
.drums .bxslider > li{
	height: 609px;
}
.drums .left .brand li{
	width: 236px;
}
.drums .slider-container .pieza img{
	margin: 83px 120px 77px;
}
.drums .bx-pager{
	bottom: 270px;
}



.voz .sets li{
	border: 1px solid #3eecfa;
	display: block;
	height: 236px;
	float: left;
	width: 236px;
}
.voz .sets a{
	color: white;
	display: block;
	padding: 208px 0 10px;
	text-align: center;
}
.voz .sets li:nth-child(1) a{
	background: url(../images/voz1.png) no-repeat center 10px;
}
.voz .sets li:nth-child(2) a{
	background: url(../images/cor2.png) no-repeat center 10px;
}

.monitores .sets li{
	border: 1px solid #3eecfa;
	display: block;
	height: 200px;
	float: left;
	width: 472px;
}
.monitores .sets a{
	color: white;
	display: block;
	padding: 173px 0 10px;
	text-align: center;
}
.monitores .sets li:nth-child(1) a{
	background: url(../images/monitor1.png) no-repeat center 10px;
}
.monitores .sets li:nth-child(2) a{
	background: url(../images/monitor2.png) no-repeat center 10px;
}
.monitores .right .sets li{
	height: 400px;
}
.monitores .right .sets li a{
	background: url(../images/monitor3.png) no-repeat center 40px;
	padding: 373px 0 10px;
}


.pa .sets li{
	border: 1px solid #3eecfa;
	display: block;
	height: 200px;
	float: left;
	width: 472px;
}
.pa .sets a{
	color: white;
	display: block;
	padding: 173px 0 10px;
	text-align: center;
}
.pa .sets li:nth-child(1) a{
	background: url(../images/pa1.png) no-repeat center 10px;
}
.pa .sets li:nth-child(2) a{
	background: url(../images/pa2.png) no-repeat center 10px;
}
.pa .sets li:nth-child(3) a{
	background: url(../images/pa3.png) no-repeat center 10px;
}






/*Canal*/
 .canal{
	color: white;
	float: right;
	margin: 20px 20px 0 0;
}
.canal input{
	background: transparent;
	border: 1px solid #3eecfa;
	color: white;
	height: 40px;
	font-size: 14px;
	margin: 0 0 0 10px;
	overflow: hidden;
	padding: 0 10px;
	text-align: center;
	width: 80px;
}



.slider-container .pieza{
	border: 1px solid #3eecfa;
	display: block;
}
.slider-container .pieza img{
	margin: 57px auto 117px;
	width: 230px;
}


.half{
	height: 320px;
}
.halfs .pieza img{
	margin: 30px auto;
	width: 196px;
}
.g-elec .right .half, .voz .right .half{
	height: 520px;
}


.g-elec .bx-pager{
	bottom: 170px;
}
.g-elec  .bx-controls-direction a{
	bottom: 330px;
}

/*Columnas*/
.col{
	float: left;
	margin: 20px;
	position: relative;
	width: 472px;
}
.col > div{
	overflow: hidden;
	margin: 0 0 20px;
}
.col a:hover, .col a.selected{
	background-color: #3eecfa !important;
	font-family: 'latoregular';
	color: #000;
}

/*cerrar*/
.save{
	  background: url(../images/save.png) no-repeat top right;
  display: block;
  height: 44px;
  position: absolute;
  right: 10px;
  top: 60px;
  width: 44px;
  padding: 8px 120px 0 0px;
  background-size: 35px;
}
.save:hover{
	background-position: right -47px;
}

.instrument{
	background: rgba(0,0,0,.5);
	height: 698px;
}
.instrument.pa, .instrument.foh, .instrument.monitores{
	padding: 40px 0 0;
}


/*posicion*/
.position li{
	border: 1px solid #3eecfa;
	display: block;
	height: 80px;
	float: left;
	width: 94px;
}
.position li a{
	display: block;
	padding: 32px;
	text-align: center;
}

/*marca*/
.brand li{
	border: 1px solid #3eecfa;
	height: 44px;
	float: left;
	text-align: center;
	width: 100%;
}
.brand a{
	color: white;
	display: block;
	font-family: 'latolight';
	padding: 14px;
}

.musico{
	margin: 0 auto;
	width: 250px;
}
.musico input{
	background:transparent;
	border-bottom: 1px solid #3eecfa;
	border-top: none;
	border-left: none;
	border-right: none;
	color: white;
	height: 40px;
	font-size: 14px;
	padding: 10px;
	text-align: center;
	width: 250px;
}
.musico input:focus{
	outline: none;
}


/*Input list*/
.input-aux-list{
	height: 650px;
	overflow-y: scroll;
	overflow-x: visible;
	margin: 50px 55px 20px 20px;
}

.input-list-container{
	margin: 20px 0 100px;
}

.input-list-container .input-list{
	margin: 0 0 10px;
	overflow: hidden;
}

.input-list-container .input-list input{
	background: transparent;
	border: 1px solid #3eecfa;
	color: white;
	height: 40px;
	font-size: 14px;
	float: left;
	overflow: hidden;
	padding: 0 10px;
	text-align: center;
	width: 155px;
}

.aux-list-container{
	margin: 20px 0;
}

.aux-list-container .input-list{
	margin: 0 0 10px;
	overflow: hidden;
}

.aux-list-container .input-list input{
	background: transparent;
	border: 1px solid #3eecfa;
	color: white;
	height: 40px;
	font-size: 14px;
	float: left;
	overflow: hidden;
	padding: 0 10px;
	text-align: center;
	width: 465px;
}



.ilustracion{
	border: 1px solid #3eecfa;
}
.ilustracion img{
	display: block;
	margin: 37px auto;
	width: 196px;
}

.g-acu .ilustracion img{
	width: 400px;
}
.keyboard .ilustracion img{
	margin: 10px auto;
	width: 310px;
}
.foh .ilustracion img{
	width: 400px;
}
.foh .right .ilustracion img{
	margin: 10px auto;
	width: 280px;
}
.voz .ilustracion img{
	width: 326px;
}
.piano .ilustracion img{
	width: 300px;
}
.bajo .ilustracion img{
	margin: 10px auto;
	width: 300px;
}


.artist-info{
	display: block;
	margin: 20px auto;
	width: 100%;
}
.artist-info form{
	height: 580px;
	overflow-y: scroll;
}
.artist-info label{
	color: white;
}
.artist-info input{
	background: none;
	border: 1px solid #3eecfa;
	color: white;
	font-family: 'latoregular';
	font-size: 15px;
	margin: 10px 0 20px;
	padding: 20px;
	text-align: center;
	text-transform:uppercase;
	width: 100%;
}
.artist-info a{
	background: #3eecfa;
	color: black;
	display: block;
	margin: 20px auto 0;
	padding: 20px 40px;
	text-align: center;
	width: 200px;
}
.artist-info a:hover{
	background: white;
}


.cont-field, .cont-field-2{
	overflow: hidden;
	padding: 0 44px;
}
.cont-field-2 input{
	float: left;
	margin: 10px 0;
	padding: 20px 5px;
	width: 184px;
}


.credits{
	margin: 40px auto;
	padding: 92px 0;
	text-align: center;
	text-transform: none;
	width: 480px;
}
.credits h2{
	font-family: "latolight";
	font-size: 50px;
	margin: 0 0 10px;
}
.credits h3{
	font-family: "latolight";
	font-size: 30px;
	margin: 0 0 10px;
}
.credits p{
	font-family: "latolight";
	font-size: 18px;
	margin: 0 0 40px;
}
.credits p.lead{
	font-size: 20px;
	line-height: 1.5;
}


.container-cargar{
	margin: 0 auto;
	padding: 40px 40px;
	width: 720px;
}
.container-cargar ul li{
	border: 1px solid #3eecfa;
	float: left;
	margin: 10px;
	height: 300px;
	width: 300px;
}
.container-cargar ul li a{
	display: block;
	text-align: center;
	padding: 260px 0 20px;
}
.container-cargar ul li a:hover{
	color: #3eecfa;
	opacity: 0.5;
}
.container-cargar ul li a.rock{
	background: url(../images/rock.png) no-repeat center 10px;
}
.container-cargar ul li a.metal{
	background: url(../images/metal.png) no-repeat center 10px;
}
.container-cargar ul li a.punk{
	background: url(../images/punk.png) no-repeat center 10px;
}
.container-cargar ul li a.hardcore{
	background: url(../images/hardcore.png) no-repeat center 10px;
}
